﻿jQuery.UI = {
	isOverflow: function() {
		var overflow = false;
		var pageHeight = $('#main').outerHeight(true) - ($('div[data-role="header"]').outerHeight(true) + parseInt($('ul[data-role="listview"]').css('margin-top').slice(0, -2)));
		var listHeight = $('.container').outerHeight(true);
		
		if (listHeight > pageHeight) {
			console.log('#main.outerHeight: ' + $('#main').outerHeight(true) + ' pageHeight: ' + pageHeight + ' listHeight: ' + listHeight);
			overflow = true;
		}
			
		return overflow;
	},
	
	append: function(icon, title) {
		$list = $('<li></li>');
		$link = $('<a></a>').attr('href', '#');
		$icon = $('<img />').attr('src', icon).addClass('ui-li-icon');
		$paragraph = $('<div></div>').addClass('content');
		$title = $('<h3></h3>').addClass('list-name').text(title);
		$desc = $('<p></p>').addClass('list-hotkey').text('사용할 키를 등록하세요');
		$config = $('<a></a>').attr('href', '#setup').attr('data-rel', 'dialog').attr('data-transition', 'slidedown').attr('data-icon', 'gear').attr('data-theme', 'c');
		
		$paragraph.append($title).append($desc);
		$link.append($icon).append($paragraph);
		$list.append($link).append($config);
		$('[data-role="listview"]').append($list.hide().fadeIn(1000));
		$('[data-role="listview"]').listview('refresh');
		
		/*
		if ($.UI.isOverflow()) {
			$('#nav-btns').fadeIn('slow');
		} else {
			$('#nav-btns').fadeOut('slow');
		}
		*/
	},

	loadRemoveLayer: function() {
		$('li[data-role!="list-divider"]').each(function(index) {
			var position = $(this).offset();
			var width = $(this).css('width');
			var height = $(this).css('height');
			var initPosX = index % 2 ? $('body').css('width') : '-' + $('body').css('width');
			
			var $layer = $('<div></div>').addClass('remove-layer');
			$layer.css('left', initPosX).css('top', position.top).css('width', width).css('height', height);
			
			var $checkbox = $('<input type="checkbox" />').attr('name', 'checkbox' + index).attr('id', 'checkbox' + index).css('position', 'relative');
			$checkbox.appendTo($layer);
			
			if (!index) {
				var $message = $('<p>삭제하려면 클릭하세요.</p>').addClass('remove-msg');
				$message.appendTo($layer);
			}
			
			var onClick = function() {
				if ($checkbox.is(':checked')) {
					hotkeyMgr.removeChecked(false);
					$checkbox.attr('checked', false);
					$layer.css("background-color", "rgba(102, 204, 255, 0.3)");
				} else {
					hotkeyMgr.removeChecked(true);
					$checkbox.attr('checked', true);
					$layer.css("background-color", "rgba(252, 57, 94, 0.3)");
				}
			}
			
			$layer.click(onClick);			
			$checkbox.click(onClick);
			
			setTimeout(function() {
				$('body').append($layer.animate({'left': position.left}, {duration: 'slow', queue: false}));				
			}, 100 * index);
		});
	},

	unloadRemoveLayer: function() {
		$('.remove-layer').each(function(index) {
			var $layer = $(this);
			var destPosX = index % 2 ? $('body').css('width') : '-' + $('body').css('width');
			
			setTimeout(function() {
				$layer.fadeTo('slow', 0).animate({'left': destPosX}, {duration: 'slow', queue: false, complete: function() {
						$(this).remove();
					}
				});
			}, 100 * index);
		});
	},
	
	back: function() {
		var isRemoveState = $('.remove-layer').is(':visible');
		
		if (isRemoveState)
			$.UI.unloadRemoveLayer();
	},
	
	showHelp: function() {
		$('#help-pannel').fadeIn(1500);
		
		setTimeout(function() {
			$('#help-pannel').fadeOut(1500);
		}, 5000);
	}		
};

$(document).ready(function() {		
	var $selectedList = '';
	
	/*
	$('[data-role=page]').live('pageshow', function(event) {
		switch (this.id) {
		case 'main':
			alert('main');
			break;
		case 'setup':
			alert('setup');
			var keys = $selectedList.find('.list-hotkey').text(' + ');
			alert(keys);
			break;
		}
	});
	*/
	
	/*
	setTimeout(function() {
		$.UI.loadRemoveLayer();
		
		//setTimeout(function() {
		//	$.UI.unloadRemoveLayer();
		//}, 2000);
	}, 2000);
	*/
	
	$('.nav-btn-up').click(function() {
		//$('ul[data-role="listview"]').scroll({'left': '+=50px'}, 'slow');
		//$('ul[data-role="listview"]').silentScroll(-100);
		//$.mobile.silentScroll(100);
		$('body').animate({'scrollTop' : '+=100'}, 'slow'); 
		console.log('clicked');
	});

	$('.nav-btn-down').click(function() {
		
	});

	/*
	$('a[data-icon="delete"]').click(function() {
		//hotkeyMgr.exit();
		$.UI.append('icons/Evernote.exe.png', '에버노트');		
	});	
	*/
	
	$('a[href="#setup"]').live('click', function() {			
		// 체크박스 초기화 
		$('#setup input:checkbox').attr('checked', false);
		
		$selectedList = $(this).parents('li');		
		var keys = $selectedList.find('.list-hotkey').text().split(' + ');		
		
		for (var index = 0; index < keys.length; index++) {		
			if (keys[index] == 'Ctrl' || keys[index] == 'Shift' || keys[index] == 'Alt' || keys[index] == 'Win') {
				$('#setup input:checkbox').each(function() {										
					if ($(this).next().text() == keys[index])
						$(this).attr('checked', true).checkboxradio("refresh");
				});
			} else {
				if (keys[index].length > 2)
					$('#key-input').val('');
				else
					$('#key-input').val(keys[index]);
			}
		}
	});

	$('#key-input').keydown(function(event) {	
		var ret = false;
		
		switch (event.keyCode) {
		case 32: $(this).val('Space'); break;
		case 112: $(this).val('F1'); break;
		case 113: $(this).val('F2'); break;
		case 114: $(this).val('F3'); break;
		case 115: $(this).val('F4'); break;
		case 116: $(this).val('F5'); break;
		case 117: $(this).val('F6'); break;			
		case 118: $(this).val('F7'); break;
		case 119: $(this).val('F8'); break;
		case 120: $(this).val('F9'); break;
		case 121: $(this).val('F10'); break;			
		case 122: $(this).val('F11'); break;			
		case 123: $(this).val('F12'); break;
		default:
			$(this).val('');
			ret = true;
		}
		
		return ret;
	});
	
	$('#setup .confirm').click(function(){		
		var modifiers = '';
		
		$('#setup input:checkbox').each(function() {
			if ($(this).is(':checked')) {
				modifiers += $(this).next().text() + ' + ';
			}
		});
		
		modifiers += $('#key-input').val();		
		$selectedList.find('.list-hotkey').text('').text(modifiers);
	});
	
	
	
});
